<template>
    <div class="role-wrapper">
        <header>
            <div class="header-left-tool">
                <div><span>角色名称</span><el-input placeholder="请输入角色名称"/></div>
                <div><span>状态</span><el-select placeholder="请选择状态"/></div>
            </div>
            <div class="header-right-tool"><el-button>重置</el-button><el-button type="primary">查询</el-button></div>
        </header>
        <main>
            <el-table :data="tableData" style="width: 100%;height:calc(100% - 36px)" border>
                <el-table-column label="Date" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-icon><timer /></el-icon>
                            <span style="margin-left: 10px">{{ scope.row.date }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="Name" width="180">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="top" width="auto">
                            <template #default>
                                <div>name: {{ scope.row.name }}</div>
                                <div>address: {{ scope.row.address }}</div>
                            </template>
                            <template #reference>
                                <el-tag>{{ scope.row.name }}</el-tag>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="Operations">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                        >Edit</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="1000" />
        </main>
    </div>
</template>

<script lang="ts" setup>
interface User {
    date: string
    name: string
    address: string
}

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}
const tableData: User[] = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>

<style scoped lang="scss">
.role-wrapper{
    height: 100%;
    weight:100%;
    padding: 15px;
    header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: white;
        height: 40px;
        padding: 12px;
        margin-bottom: 15px;
        .header-left-tool{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:flex-start;
            width: 40%;
            div{
                margin-right: 10px;
                span{
                    margin-right: 10px;
                }
                .el-input{
                    display: inline;
                }
            }
        }
    }
    main{
        box-sizing: border-box;
        padding: 10px;
        height: calc(100% - 40px - 15px - 15px - 6px);
        background: white;
        position: relative;
        .el-pagination{
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
}
</style>
